{{ define "hx_css" }}
<style>
    :root {
        /* Colours could be made variable in future to support themes */
        --primary-color: #4A154B;
        --secondary-color: #36C5F0;
        --accent-color: #ECB22E;
        --success-color: #2EB67D;
        --error-color: #E01E5A;

        --bg-color: #FFFFFF;
        --sidebar-bg: #3F0E40;
        --text-color: #1D1C1D;
        --text-secondary: #616061;
        --border-color: #DDDDDD;
        --hover-color: rgba(0, 0, 0, 0.05);
        --active-color: rgba(0, 0, 0, 0.1);
        --message-hover: #F8F8F8;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --bg-color: #1A1D21;
            --sidebar-bg: #19171D;
            --text-color: #D1D2D3;
            --text-secondary: #ABABAD;
            --border-color: #424242;
            --hover-color: rgba(255, 255, 255, 0.05);
            --active-color: rgba(255, 255, 255, 0.1);
            --message-hover: #222529;
        }
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
        color: var(--text-color);
        background-color: var(--bg-color);
        line-height: 1.15;
    }

    .container {
        display: flex;
        height: 100vh;
        overflow: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: antialiased;
    }

    .channel-sidebar {
        width: 16rem;
        padding-bottom: 1.5rem;
        flex: none;
        background-color: var(--sidebar-bg);
        color: var(--text-color);
	overflow-y: auto;
    }

    /* Sidebar channel heading */
    .channel-sidebar header {
        color: #fff;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: .75rem;
        margin-bottom: 1.5rem;
        justify-content: space-between;
    }

    .sidebar-header-inner {
        flex: auto;
    }

    .sidebar-header-inner h1 {
        font-size: 1.25rem;
        margin-bottom: .25rem;
        line-height: 1.25;
        font-weight: 600;
        color: #fff;
    }

    .subtitle {
        font-size: .65rem;
        color: #fff;
        opacity: 0.5;
    }

    /* Sidebar conversation list */
    .channel-list {
        margin-bottom: 2rem;
    }

    .channel-header {
        color: #fff;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-bottom: .5rem;
        justify-content: space-between;
        align-items: center;
    }

    .channel-header p {
        opacity: .75;
    }

    .channel-list a {
        color: #fff;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .25rem;
        padding-bottom: .25rem;
        text-decoration: none;
        display: block;
    }

    .channel-list a.active {
        background-color: #38a89d;
    }

    /* Conversation view */
    #conversation {
        overflow: hidden;
        flex: 1;
        flex-direction: column;
        display: flex;
        background-color: var(--bg-color);
    }

    .conversation-header,
    .user-profile-header {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        flex: none;
        align-items: center;
        display: flex;
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: var(--border-color);
    }

    .conversation-inner,
    .user-profile-header-inner {
        display: flex;
        flex-direction: column;
    }

    .conversation-inner h3,
    .user-profile-header-inner h3 {
        color: var(--text-color);
        margin-bottom: .25rem;
        font-weight: 800;
        margin: 0;
    }

    #conversation-inner p {
        color: var(--border-color);
        white-space: nowrap;
        overflow: hidden;
        font-size: .875rem;
        text-overflow: ellipsis;
    }

    .message-list,
    .user-profile {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        flex: 1;
        overflow-y: auto;
    }

    article.message {
        font-size: .875rem;
        margin-bottom: 1rem;
        align-items: flex-start;
        display: flex;
    }

    article.message img.avatar {
        width: 2.5rem;
        margin-right: .75rem;
        height: 2.5rem;
        border-radius: .25rem;
    }

    article.message .message-inner {
        flex-direction: column;
    }

    .message-content {
        overflow: hidden;
        flex: 1;
    }

    .message-content span.message-sender a {
        font-weight: 700;
        text-decoration: none;
        color: var(--text-color);
    }

    .message-content span.message-timestamp {
        font-size: .75rem;
    }

    .message-content span.message-timestamp a {
        text-decoration: none;
        color: var(--text-secondary);
    }

    .message-content p {
        color: var(--text-color);
        margin: 0;
        line-height: 1.5;
    }

    .message-content pre {
        color: var(--text-secondary);
        text-wrap: auto;
    }

    .message-inner footer.thread-info {
        margin-top: .5rem;
    }

    /* File attachments */
    .slack-files p {
        color: #616061;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .file-hidden {
        background-color: #f8f8f8;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 12px;
        margin-bottom: 8px;
        color: #616061;
    }

    .file-image, .file-video, .file-audio {
        display: inline-block;
        max-width: 400px;
        max-height: 300px;
        border-radius: 8px;
        margin-bottom: 8px;
        border: 1px solid #e0e0e0;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .file-preview-container {
        position: relative;
        display: inline-block;
        margin-bottom: 12px;
    }

    /* File link styling */
    .file-link {
        display: inline-flex;
        align-items: center;
        background-color: #f8f8f8;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 12px 16px;
        margin-bottom: 8px;
        color: #1264a3;
        text-decoration: none;
        font-weight: 500;
    }

    .file-link:before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 8px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231264a3"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/><path d="M14 3v5h5"/></svg>');
        background-size: contain;
    }

    .file-link:hover {
        background-color: #f1f1f1;
    }

    /* User profile sidebar */
    .profile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 12px;
    }

    .profile-header h2 {
        font-size: 18px;
        font-weight: 700;
        color: #1d1c1d;
        margin: 0;
    }

    .close-button {
        color: #616061;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }

    .close-button:hover {
        background-color: #f8f8f8;
        color: #1d1c1d;
    }

    .user-profile {
        display: flex;
        flex-direction: column;
    }

    .profile-name {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-color);
        padding-top: .5rem;
    }

    .profile-image {
        border-radius: 4px;
        object-fit: cover;
        width: 18rem;
    }

    .profile-details {
        list-style-type: none;
        padding: 0;
        margin: 0;
        padding-top: .5rem;
    }

    .profile-details li {
        font-size: 14px;
        color: #616061;
        margin-bottom: 8px;
        display: flex;
    }

    .profile-details li span {
        color: #1d1c1d;
        margin-left: 4px;
    }

    .thread {
	    overflow-y: auto;
    }

    .unknown-user {
        color: #616061;
        font-style: italic;
    }
</style>
{{ end }}
